<template>
  <el-col :span="span">
    <div ref="iconPickerRef">
      <el-popover :visible="visible" :width="width" placement="bottom" :show-arrow="false">
        <template #reference>
          <el-input class="input-cursor-pointer" v-model="iconValue" readonly @click="visible = !visible" placeholder="点击选择图标">
            <template #prepend>
              <EcoIcon :icon="iconValue" />
            </template>
          </el-input>
        </template>
        <div ref="popoverContentRef">
          <el-input placeholder="搜索图标" v-model="searchIcon" clearable @input="filterIcons" />
          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="svg 图标" name="svg">
              <el-scrollbar height="300px">
                <ul class="icon-container">
                  <li v-for="icon in filteredSvgIcons" :key="'svg-' + icon" class="icon-item" @click="selectIcon(icon)">
                    <el-tooltip :content="icon" placement="bottom" effect="light">
                      <Icon :icon="icon" />
                    </el-tooltip>
                  </li>
                </ul>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="Element 图标" name="element">
              <el-scrollbar height="300px">
                <ul class="icon-container">
                  <li v-for="icon in filteredEpIcons" :key="icon" class="icon-item" @click="selectIcon(icon)">
                    <el-icon>
                      <component :is="icon" />
                    </el-icon>
                  </li>
                </ul>
              </el-scrollbar>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-popover>
    </div>
  </el-col>
</template>
<script setup lang="ts">
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
export interface IconPickerProps {
  modelValue?: string
  width?: number // icon名称
  span?: number // icon名称
}
// props 默认值
const props = withDefaults(defineProps<IconPickerProps>(), {
  modelValue: 'api',
  width: 500,
  span: 24
})
const visible = ref(false)
const activeTab = ref('svg')
const iconPickerRef = ref()
const popoverContentRef = ref()
const svgIcons: string[] = []
const filteredSvgIcons = ref<string[]>([])
const filteredEpIcons = ref<string[]>([])
const epIcons: string[] = Object.keys(ElementPlusIconsVue)
const emit = defineEmits(['update:modelValue'])
const iconValue = toRef(props, 'modelValue')
const searchIcon = ref('')
const loadSvgIcons = () => {
  const icons = import.meta.glob('../../assets/svg/icons/*.svg')
  for (const item in icons) {
    const iconName = item.replace(/.*\/(.*)\.svg$/, '$1')
    svgIcons.push(iconName)
  }
  filteredSvgIcons.value = svgIcons
}

const selectIcon = (iconClass: string) => {
  if (activeTab.value === 'element') {
    iconClass = 'el-icon-' + iconClass
  }
  emit('update:modelValue', iconClass)
  visible.value = false
}

const filterIcons = () => {
  if (activeTab.value === 'svg') {
    // 过滤SVG图标逻辑
    filteredSvgIcons.value = searchIcon.value
      ? svgIcons.filter(iconName => iconName.toLowerCase().includes(searchIcon.value.toLowerCase()))
      : svgIcons
  } else {
    // 过滤Element Plus图标逻辑 TODO
    filteredEpIcons.value = searchIcon.value ? epIcons.filter(iconName => iconName.toLowerCase().includes(searchIcon.value.toLowerCase())) : epIcons
  }
}
const handleTabClick = (tabName: any) => {
  activeTab.value = tabName.name
  filterIcons()
}
onClickOutside(iconPickerRef, () => (visible.value = false), {
  ignore: [popoverContentRef]
})
onMounted(() => {
  loadSvgIcons()
})
</script>
<style scoped lang="scss">
.input-cursor-pointer :deep(.el-input__wrapper),
.input-cursor-pointer :deep(.el-input__inner) {
  cursor: pointer;
}
.icon-container {
  display: flex;
  flex-wrap: wrap;
  .icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin: 4px;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: all 0.3s;
  }
  .icon-item:hover {
    border-color: #4080ff;
    scale: 1.2;
  }
}
</style>
